<template>
<div class="m-page wrapper">
	<div class="m-page-box">
		<div class="m-page-left" style="height: 448px;">
			<div class="nav">
				<ul>
          <li></li>
          <router-link tag="li" active-class="active" :to="link.path" v-for="link, index in links" :key="index"><a>{{link.name}}</a></router-link>
				</ul>
			</div>
		</div>
    <router-view></router-view>
	</div>
	<div style="clear:both"></div>
</div>
</template>

<script>
export default {
  data () {
    return {
      links: [
        { path: '/personal/reserve/exp', name: '体验预约' },
        { path: '/personal/reserve/forum', name: '论坛预约' }
      ]
    }
  }
}
</script>

<style>
  .wrapper {
    margin: 0 auto;
    width: 1210px;
    padding: 20px 0;
  }
  .m-page-box {
    margin-left: -2px;
    margin-right: -2px;
    height: auto;
    padding-bottom: 3px;
    padding-top: 3px;
}
.m-page-left {
    width: 140px;
}
.m-page-left {
  box-shadow: 2.5px 4.33px 10px 0px rgba( 0, 0, 0, 0.2 );

    width: 185px;
    background: #fff;
    border-radius: 5px;
    float: left;
    margin-left: 2px;
}
.m-page-left .nav {
    margin-top: 15px;
}
.m-page-left .nav li {
    line-height: 45px;
}
.m-page-left .nav li {
    line-height: 55px;
    position: relative;
    margin-bottom: 1px;
    color: #666;
}
.m-page-left .nav li.active, .m-page-left .nav li:hover {
    background: #E8F0FC;
}
.m-page-left .nav li.active, .m-page-left .nav li:hover {
    background: #e5edfa;
}
.m-page-left .nav li a {
    font-size: 14px;
    padding-left: 49px;
    text-decoration: none;
}
.m-page-left .nav li a {
    color: #959595;
    display: block;
    padding-left: 40px;
}
.m-page-left .nav li.active:before, .m-page-left .nav li:hover:before {
    visibility: visible;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.m-page-left .nav li:before {
    left: 38px;
    width: 5px;
    height: 21px;
    display: block;
    top: 50%;
    margin-top: -2.5px;
    border-radius: 2px;
    background: #0143A0;


}
.m-page-left .nav li:before {
    position: absolute;
    left: 2px;
    height: 21px;
    top: 50%;
    margin-top: -8px;
    width: 3px;
    content: "";
    background: #5687f1;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
.m-page-left .nav li.active a, .m-page-left .nav li:hover a {
    color: #0143A0;
}
</style>